<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>图片预览</title>
	<meta name="decorator" content="default"/>
	<style>
		@charset "utf-8";
		/* CSS Document */
		*{
			padding:0px;
			border:0px;
			margin:0px;
		}
		ul {
			list-style:none;
		}
        ul, ol {
            padding: 0;
            margin: 0 0 0 0!important;
        }
		.slideBox {
			margin:0 auto;
			width:300px;
			height:480px;
			/*position:relative;*/
			overflow:hidden;
		}
		.slideBox ul {
			position:relative;
			width:2000px;}
		.slideBox ul li {
			float:left;
			width:300px;
			height:480px;
			position:relative;

		}
		.spanBox {
			position:absolute;
			width:300px;
			height:20px;
			bottom:10px;
			left:80px;
		}
		.spanBox span {
			width:18px;
			height:18px;
			margin-left:5px;
			background-color:rgba(201,178,207,1.00);
			float:left;
			line-height:16px;
			text-align:center;
			text-shadow:2px 2px 2px #C5EBF0;
			font-family:cabin-sketch;
			font-size:15px;
		}
		.slideBox .spanBox .active {
			background-color:rgba(155,83,244,0.79);
			border:solid 1px #BEEBEC;
			border-radius:4px;
		}
		.prev {
			position:absolute;
			left:0px;
			top:320px;
			float:left;
			border-left:solid 1px rgba(251,245,246,1.00);
			opacity:0.5;
		}
		.next {
			width:15px;
			height:50px;
			position:absolute;
			right:0px;
			top:320px;
			float:right;
			border-right:solid 1px rgba(245,237,237,1.00);
			opacity:0.5
		}
	</style>
	<script type="text/javascript">
        $(document).ready(function(){
            var slideBox = $(".slideBox");
            var ul = slideBox.find("ul");
            var oneWidth = slideBox.find("ul li").eq(0).width();
            var number = slideBox.find(".spanBox span");            //注意分号 和逗号的用法
            var timer = null;
            var sw = 0;
            //每个span绑定click事件，完成切换颜色和动画，以及读取参数值
            number.on("click",function (){
                $(this).addClass("active").siblings("span").removeClass("active");
                sw=$(this).index();
                ul.animate({
                    "right":oneWidth*sw,    //ul标签的动画为向左移动；
                });
            });
            //左右按钮的控制效果
            $(".next").stop(true,true).click(function (){
                sw++;
                if(sw==number.length){sw=0};
                number.eq(sw).trigger("click");
            });
            $(".prev").stop(true,true).click(function (){
                sw--;
                if(sw==number.length){sw=0};
                number.eq(sw).trigger("click");
            });
            //定时器的使用，自动开始
            timer = setInterval(function (){
                sw++;
                if(sw==number.length){sw=0};
                number.eq(sw).trigger("click");
            },2000);
        })
	</script>
</head>
<body>
<div class="slideBox">
	<ul>
		<c:forEach items="${imageList}" var="image">
			<li><img src="${fns:getDictValue('website','website','')}${image.path}" width="450" height="350"/></li>
		</c:forEach>
	</ul>
	<div class="spanBox">
        <c:forEach items="${imageList}" var="image" varStatus="status">
		    <span>${status.index}</span>
        </c:forEach>
	</div>
</div>
</body>
</html>